<!DOCTYPE html>
<html>
<head>
<title>首页</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="stylesheet" href="/tile-loader/lib/layui-2.3.0/css/layui.css">
<link rel="stylesheet" href="/tile-loader/lib/ztree-3.5.35/css/metroStyle/metroStyle.css">
<style type="text/css">
html, body {
	width: 100%;
	height: 100%;
 	padding: 0;
 	margin: 0;
 	overflow: hidden; 
}
</style>
</head>
<body>

<div class="layui-fluid" style="height: 100%; padding: 0">
	<div class="layui-row" style="height: 110px;">
		<div class="layui-col-md12">
			<fieldset class="layui-elem-field site-demo-button" style="margin-top: 8px;">
				<legend>地图列表</legend>
				<div style="margin: 10px 10px 15px 15px;">
					<button class="layui-btn layui-btn-normal changeMap" data-mapurl="amap/index">高德地图</button>
					<button class="layui-btn layui-btn-normal changeMap" data-mapurl="bmap/index">百度地图</button>
					<button class="layui-btn layui-btn-normal changeMap" data-mapurl="gmap/index">谷歌地图</button>
				</div>
			</fieldset>
		</div>
	</div>
	<div class="layui-row" style="height: calc(100% - 110px);">
		<div class="layui-col-md3" style="overflow-x: hidden; overflow-y: auto; height: 100%;">
			<div class="layui-collapse">
				<div class="layui-colla-item" style="min-width: 265px;">
					<h2 class="layui-colla-title">地图级别</h2>
					<div class="layui-colla-content layui-show layui-form">
					   <script type="text/javascript">
					     for(var i=0; i<=4; i++) {
					    	 for(var j=1; j<=25; j+=5) {
					    		 if(i + j <= 25) {
					    			 if(i + j < 10) {
					    				 document.write('<input type="checkbox" name="zoom" title="&nbsp;'+(i+j)+'&nbsp;" value="'+(i+j)+'" lay-filter="zoomCheck" lay-skin="primary">');
					    			 } else {
					    				 document.write('<input type="checkbox" name="zoom" title="'+(i+j)+'" value="'+(i+j)+'" lay-filter="zoomCheck" lay-skin="primary">');
					    			 }
					    		 }
					    	 }
					    	 document.write('<br/>');
					     }
					   </script>
						<div style="margin-top: 10px;">
							瓦片数量：<span id="sumNum">0</span>
						</div>
					</div>
				</div>
				
				<div class="layui-colla-item">
					<h2 class="layui-colla-title">下载任务</h2>
					<div class="layui-colla-content layui-show downloadTask" style="max-height: 160px; overflow-y: auto; overflow-x: hidden;">
					</div>
				</div>
				
				<div class="layui-colla-item save-path-config">
					<h2 class="layui-colla-title">保存路径</h2>
					<div class="layui-colla-content layui-show layui-form">
						<input type="text" name="path" placeholder="请选择下载路径"
							value="" readonly="readonly" class="layui-input" style="width: calc(100% - 100px); display: inline;">
						<button class="layui-btn layui-btn-normal setPath">选择路径</button>
					</div>
				</div>
				
				<div class="layui-colla-item">
					<h2 class="layui-colla-title">地名列表</h2>
					<div class="layui-colla-content layui-show layui-form" style="height: 340px;">
						<input type="text" id="searchTree" placeholder="请输入地址" autocomplete="off" class="layui-input">
						<ul class="ztree" id="placenameTree" style="height: 300px;overflow-y: auto; overflow-x: hidden;"></ul>
					</div>
				</div>
				
			</div>
		</div>
		
		<div class="layui-col-md9" style="height: 100%; overflow: hidden;">
			<iframe src="" frameborder="0" style="width: 100%; height: 100%;"></iframe>           
		</div>
  </div>
</div>
<script type="text/javascript" src="/tile-loader/lib/jquery-2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="/tile-loader/lib/ztree-3.5.35/js/jquery.ztree.all.js"></script>
<script type="text/javascript" src="/tile-loader/lib/ztree-3.5.35/js/jquery.ztree.exhide.min.js"></script>
<script type="text/javascript" src="/tile-loader/lib/ztree-3.5.35/plugins/fuzzysearch.min.js"></script>
<script type="text/javascript" src="/tile-loader/lib/layui-2.3.0/layui.all.js"></script>


<script type="text/javascript" src="/tile-loader/js/commons/toolkit/resultHandler.js"></script>
<script type="text/javascript" src="/tile-loader/js/index.js"></script>
</body>
</html>